<template>
  <view class="container" style="width: 100%;">
    <view class="line"></view>
    <view class="header">
      <text class="title">MENOPAUSAL</text>
      <text class="title highlighted">CONSTITUTION</text>
      <text class="title" style="margin-bottom: 0;margin-top: 40rpx;">SELF-ASSESSMENT</text>
      <text class="title" style="margin-bottom: 0;">更年期体质</text>
      <text class="title">证型自测</text>
    </view>

    <view class="instructions">
      <text class="instruction-title">说明：</text>
      <text class="instruction-content">根据<text class="date">近3个月的</text>身体感受</text>
      <text class="instruction-content">勾选符合的症状</text>
      <text class="multiple-select">可多选</text>
      <view class="lines"></view>
      <text class="disclaimer">● 自测信息仅用于个人提示证型可能性参考</text>
    </view>
    <!-- <button class="start-btn" @click="navigateToQuestion" style="line-height: 2.56666;">开始作答</button> -->
    <view class="common-btn" @click="navigateToQuestion">开始作答</view>
  </view>
</template>

<script>
  export default {
    methods: {
      navigateToQuestion() {
        uni.navigateTo({
          url: '/pages/question/question'
        })
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 0 70rpx;
    width: 680rpx;
  }

  .header {
    margin-top: 80rpx;
  }

  .line {
    width: 300rpx;
    height: 10rpx;
    background-color: #000;
  }

  .lines {
    width: 300rpx;
    height: 10rpx;
    background-color: #000;
    margin-top: 40rpx;
  }

  .title {
    font-size: 36rpx;
    color: #2c3e50;
    display: block;
    margin-bottom: 15rpx;
    letter-spacing: 2rpx;
    /* font-weight: 600; */
  }

  .title.highlighted {
    background-color: #FFD700;
    padding: 0 10rpx;
    background-color: #FFD700;
    padding: 0 0.3125rem;
    height: 1.1rem;
    width: 400rpx;
  }

  .subtitle {
    font-size: 46rpx;
    margin-bottom: 20rpx;
    text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
    display: block;
  }

  .instructions {
    width: 100%;
    margin-bottom: 80rpx;
    margin-top: 40rpx;
  }

  .instruction-title {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 6rpx;
    display: block;
  }

  .instruction-content {
    font-size: 42rpx;
    color: #555555;
    margin-bottom: 6rpx;
    display: block;
    line-height: 1.6;
    text-align: justify;
  }

  .date {
    background-color: #FFD700;
  }

  .multiple-select {
    font-size: 75rpx;
    color: #000;
    background-color: #FFD700;
    height: 70rpx;
    padding: 6rpx 6rpx;
    margin: 6rpx 0;
    display: inline-block;
    font-weight: 500;
  }

  .disclaimer {
    font-size: 24rpx;
    color: #999999;
    margin-top: 30rpx;
    display: block;
  }

  .start-btn {
    width: 90%;
    background-color: #000;
    color: #ffffff;
    font-size: 34rpx;
    border-radius: 0rpx;
    margin-top: 60rpx;
    border: none;
    left: -36rpx;
  }

  .start-btn:active {
    transform: scale(0.98);
  }
</style>